<template>
    <div id="rank">
        <CommonHeader :header="Header"></CommonHeader>
		<div id='rank' class="mt40">
			<div class="mb40">
				<mt-tab-container-item v-for="(item,index) in Rank" :key="index">
					<mt-cell :title="item.title">
						<span><mt-badge size="small" color="red" class="badge">{{index+1}}</mt-badge></span>
						<img slot="icon" :src="item.imgs" width="80" height="50">
					</mt-cell>
				</mt-tab-container-item>	
			</div>	
		</div>
		<!-- 底部Nav -->
    	<Tab :tab1="homeTab1" :tab2="homeTab2" :tab3="homeTab3" :tab4="homeTab4"></Tab>
    </div>
</template>
<script>
import CommonHeader from '../../components/Header/CommonHeader.vue'
import CommonProvider from "@/providers/CommonProvider";
import Tab from '@/components/Tab/Tab.vue'
import { MessageBox } from 'mint-ui';
export default {
	name:'userCenter',
	data(){
		return{
			Header:'攻略好评排行榜',
			homeTab1: '首页',
			homeTab2: '发现',
			homeTab3: '排行榜',
			homeTab4: '中心',
			Position: this.$store.getters.isShowMap,
			Rank:[]
		}
	},
	components:{
		CommonHeader,Tab
	},
	mounted:function(){
		if(this.Position==''){
			MessageBox.alert('获取当前位置').then(action => {
				this.$router.push('/map');
			});
		}
		this.init();
	},
	methods: {
		init(){
			let self = this;
			let data = {
				Position: this.Position,
			};
			CommonProvider.Rank(data).then(res => {
				self.Rank = res.data;
				console.log(res.data);
			});
		}
	},
}
</script>
<style lang='scss' scoped>
.bg{
	margin-top: 41px;
}

</style>
